<template>
  <div :style="{'width': isExhibition || showMobilePage ? 'unset' : '542px'}" class="author-commission-wrap">
    <div class="pay-period">
      <el-form-item v-if="!isExhibition" :prop="moduleName + '.payPeriod'" :class="{'mobile-create-flex': showMobilePage}" label-width="160px" label="结算周期(账期)/期数">
        <el-select v-model="selectData.payPeriod" placeholder="请选择结账周期" popper-class="global-select-down" >
          <!-- <el-option
            label="请选择"
            value=""
          /> -->
          <el-option
            v-for="item in settlePeriodOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </div>
    <div class="pay-period">
      <el-form-item v-if="isShowPeriod && !isExhibition" :prop="moduleName + '.period'" label="">
        <el-input v-model="selectData.period" oninput="if(value>999999999999)value=999999999999" type="number" placeholder="请输入结算周期" />
      </el-form-item>
    </div>
    <div v-if="isExhibition" style="display: flex;">
      <div class="gray-radio" style="color:#406eff;">提成类</div>
      <span style="margin-left: 10px; color: #666;">结算周期: {{ selectData.payPeriod | mapOptions(settlePeriodOptions) }}</span>
      <span v-if="isShowPeriod" style="color: #999;" >( {{ selectData.period }} 期)</span>
    </div>
  </div>
</template>
<script>
import { settlePeriodOptions } from '../../module/options';
import { mapOptions } from '@/filters';
import { mapState } from 'vuex';
export default {
  name: 'AuthorCommission',
  filters: {
    mapOptions
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    isExhibition: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      settlePeriodOptions
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    isShowPeriod() {
      return this.selectData.payPeriod === 4;
    }
  }
};
</script>
<style lang="scss" scoped>
.author-commission-wrap {
  display: flex;
}
.pay-period {
  & ::v-deep {
    .el-input__inner {
      width: 152px !important;
    }
  }
}
.mobile-create-flex {
  ::v-deep {
    .el-form-item__content {
      .el-input__inner {
        width: 100% !important;
      }
    }
  }
}
</style>
